<template>
	<BasicModal v-bind="$attrs" title="证书" @register="registerModal" :width="880" :height="480">
		<div class="certificate" ref="certificateContainer" style="padding-bottom: 16px">
			<div>
				<div>公司Logo</div>
				<h3>石家庄市保安服务公司</h3>
				<h3>等级评定证书</h3>
				<p>您公司评定为&nbsp;&nbsp;二&nbsp;&nbsp;级安全技术防范办案服务公司，特此发证</p>
				<p>有效期至23</p>
				<p>发证单位：石家庄市保安协会</p>
				<p>发证日期：23</p>
			</div>
			<div>
				<h4>说明</h4>
				<p>1、此证书不得伪造、变造、买卖、出租、出借</p>
				<p>2、换发此证书，必经原发证单位重新评定</p>
				<p>3、此证书需每年符合，并加盖原发证单位印章</p>
				<p>4、公司注销，应回交证书</p>
				<p>5、公司重组、合并、分立等应回交证书，重新申请评定</p>
				<p>6、此证书不得伪造、变造、买卖、出租、出借</p>
				<p>7、此证书不涵盖子公司</p>
				<h4>边年度考核情况</h4>
				<div>
					<div>&nbsp;</div>
					<div>&nbsp;</div>
					<div>&nbsp;</div>
				</div>
				<p>证书编号：NO.202403240001</p>
			</div>
		</div>
		<template #footer>
			<buttom type="primary" @click="handleUpload">上传</buttom>
		</template>
	</BasicModal>
</template>

<script lang="ts" setup>
import html2canvas from 'html2canvas';
import { ref } from 'vue';
import DownloadFile from '/@/utils/downloadFile.js';
const emit = defineEmits(['success', 'register']);
const certificateContainer = ref();
const certificateUrl = ref('');
const certificateFile = ref<File | null>(null);
const formattedDateTime = ref('');
const createHtml = async () => {
	const currentDate = new Date();
	currentDate.setFullYear(currentDate.getFullYear() + 3);
	const year = currentDate.getFullYear();
	const month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
	const day = ('0' + currentDate.getDate()).slice(-2);
	formattedDateTime.value = `${year}年${month}月${day}日`;
	const canvas = await html2canvas(certificateContainer.value);
	certificateUrl.value = canvas.toDataURL('image/png');
	certificateFile.value = base64ToFile(certificateUrl.value, '证书.png');
	// content 文件流【blob】
	const d = new DownloadFile();
	console.log(certificateFile.value);
	d.downloadFile(certificateFile.value, '证书.png');
	emit('success');
};

// const base64ToFile = (base64: string, fileName: string) => {
//   const rawLength = window.atob(base64.split(';base64,')[1]).length
//   const uInt8Array = new Uint8Array(rawLength)
//   for (let i = 0; i < rawLength; ++i) uInt8Array[i] = window.atob(base64.split(';base64,')[1]).charCodeAt(i)
//   return new File([new Blob([uInt8Array], { type: base64.split(';base64,')[0].split(':')[1] })], fileName, {
//     type: base64.split(';base64,')[0].split(':')[1]
//   })
// }

const base64ToFile = (base64, fileName) => {
	const contentType = base64.split(';base64,')[0].split(':')[1];
	const byteCharacters = atob(base64.split(';base64,')[1]);
	const byteArrays = [];
	for (let offset = 0; offset < byteCharacters.length; offset += 512) {
		const slice = byteCharacters.slice(offset, offset + 512);
		const byteNumbers = new Array(slice.length);
		for (let i = 0; i < slice.length; i++) {
			byteNumbers[i] = slice.charCodeAt(i);
		}
		const byteArray = new Uint8Array(byteNumbers);
		byteArrays.push(byteArray);
	}
	const blob = new Blob(byteArrays, { type: contentType });
	return new File([blob], fileName);
};

const handleUpload = async () => {
	const file = new FormData();
	file.append('file', certificateFile.value as File);
	// const result = (await uploadApi({ file: certificateFile.value as File }, () => {})) as { data: { url: string } };
	// if (result.data.data) {
	// 	const parts = result.data.data.split('/');
	// 	const path = '/' + parts.slice(5).join('/'); // 从第四个元素开始拼接路径部分
	// 	console.log(path, 'path');
	// 	// const urls = result.data.data
	// 	const res = await uploadRate({ id: id.value, url: path });
	// 	if (res) {
	// 		console.log('上传成功');
	// 		emit('success');
	// 		closeModal();
	// 	}
	// }
};

// 暴露变量父组件执行
defineExpose({
	createHtml,
});
</script>

<style lang="less" scoped>
.certificate {
	width: 800px;
	height: 400px;
	border: 1px solid #000;
	display: flex;

	> div {
		width: 50%;
	}

	> div:nth-of-type(1) {
		> div:nth-of-type(1) {
			display: flex;
			justify-content: center;
			align-content: center;
			margin: 20px auto;
			width: 80px;
			height: 80px;
			line-height: 80px;
			border: 1px solid #000;
		}

		> h3 {
			width: 72%;
			margin: auto;
			font-size: 28px;
			text-align: center;
		}

		> h3:nth-of-type(2) {
			margin-bottom: 20px;
		}

		> p {
			width: 72%;
			margin: 4px auto;
			text-indent: 2em;
		}

		> p:nth-of-type(2) {
			margin-bottom: 32px;
		}

		> p:nth-of-type(3),
		> p:nth-of-type(4) {
			text-align: right;
		}
	}

	> div:nth-of-type(2) {
		> h4 {
			margin: 10px 0;
			font-size: 20px;
			text-align: center;
		}

		> p {
			margin: 4px 0;
		}

		> div {
			display: flex;
			width: 92%;
			height: 72px;
			border: 1px solid #000;

			> div {
				width: 33.33%;
				height: 100%;
				border-left: 1px solid #000;
			}

			> div:nth-of-type(1) {
				border-left: 0;
			}
		}

		> p:nth-of-type(8) {
			margin: 10px 8% 0 0;
			text-align: right;
		}
	}
}
</style>
